<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="css/lato.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icon-font.css">
    <title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
  <div class="navigation">
        <input type="checkbox" class="nav_checkbox" id="nav_toggle">
        <label class="nav_button" for="nav_toggle">
            <span class="nav_icon">&nbsp;</span>
        </label>
        <div class="nav_background">&nbsp;</div>
        <nav class="nav">
            <ul class="list">
                <li class="item"><a href="#" class="link"><span>01</span>About Natous</a></li>
                <li class="item"><a href="#" class="link"><span>02</span>Your benefits</a></li>
                <li class="item"><a href="#" class="link"><span>03</span>Popular tours</a></li>
                <li class="item"><a href="#" class="link"><span>04</span>Stories</a></li>
                <li class="item"><a href="#" class="link"><span>05</span>Book now</a></li>
            </ul>
        </nav>
    </div>
  <header class="header">
      <div class="logo-box">
          <img src="img/logo-white.png" alt="Logo" class="logo">
      </div>

      <div class="text-box">
          <h1 class="heading-primary">
              <span class="heading-primary-main">Outdoors</span>
              <span class="heading-primary-sub">is where life happens</span>
          </h1>

          <a href="#" class="btn btn-white btn-animated">
              Discover our tours
          </a>
      </div>
  </header>
  <main>
      <section class="section-about">
          <div class="u-center-text u-margin-bottom-8">
              <h2 class="heading-secondary">
                  Exciting tours for adventurous people
              </h2>
          </div>

          <div class="row">
              <div class="col-1-of-2">
                  <h3 class="heading-tertiary u-margin-bottom-small">
                    You're going to fall in love with nature
                  </h3>
                  <p class="paragraph">
                      Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 histories of more than years. Lie in the southeast of our country.orests have made up for its lack of statelorests.

                  <h3 class="heading-tertiary u-margin-bottom-small">
                      You're going to fall in love with nature
                  </h3>
                  <p class="paragraph">
                      Shenzhen is one of China's top tourist destinations, attracting millions of visitors each year. Its pleasant seashore and well-preserved forests have made up for its lack of stately mountains and rivers.
                  </p>

                  <a href="#" class="btn-text">
                      Learn More &rarr;
                  </a>
              </div>
              <div class="col-1-of-2">
                  <div class="composition">
                      <img src="img/nat-1-large.jpg"  class="photo photo_p1">
                      <img src="img/nat-2-large.jpg"  class="photo photo_p2">
                      <img src="img/nat-3-large.jpg"  class="photo photo_p3">
                  </div>
              </div>
          </div>
      </section>

      <section class="section-features">
          <div class="row">
              <div class="col-1-of-4">
                  <div class="feature-box">
                      <i class="icon-basic-world feature-box-icon"></i>
                      <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                      <p class="feature-box-text">
                          Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 histori
                      </p>
                  </div>
              </div>
              <div class="col-1-of-4">
                  <div class="feature-box">
                      <i class="icon-basic-world feature-box-icon"></i>
                      <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                      <p class="feature-box-text">
                          Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 histori
                      </p>
                  </div>
              </div>
              <div class="col-1-of-4">
                  <div class="feature-box">
                      <i class="icon-basic-world feature-box-icon"></i>
                      <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                      <p class="feature-box-text">
                          Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 histori
                      </p>
                  </div>
              </div>
              <div class="col-1-of-4">
                  <div class="feature-box">
                      <i class="icon-basic-world feature-box-icon"></i>
                      <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                      <p class="feature-box-text">
                          Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 histori
                      </p>
                  </div>
              </div>
          </div>
      </section>

      <section class="section-tours">
          <div class="u-center-text u-margin-bottom-8">
              <h2 class="heading-secondary">
                  Most popular tours
              </h2>
          </div>

          <div class="row">
              <div class="col-1-of-3">
                  <div class="card">
                      <div class="card_side front">
                          <div class="card-front-pic">
                              &nbsp;
                          </div>
                          <h4 class="card-front-heading">
                              <span class="card_heading_span">
                                  The sea explorer
                              </span>
                          </h4>
                          <div class="card-front-detail">
                              <ul>
                                  <li>3 day tours</li>
                                  <li>Up to 30 people</li>
                                  <li>2 tour guides</li>
                                  <li>Sleep in cozy hotels</li>
                                  <li>Difficulty:easy</li>
                              </ul>
                          </div>
                      </div>
                      <div class="card_side back">
                          <div class="cta">
                              <div class="price">
                                  <p class="only">Only</p>
                                  <p class="value">$297</p>
                              </div>
                              <a href="#popup" class="btn btn-white">Book now!</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-1-of-3">
                  <div class="card">
                      <div class="card_side front">
                          <div class="card-front-pic">
                              &nbsp;
                          </div>
                          <h4 class="card-front-heading">
                              <span class="card_heading_span">
                                  The sea explorer
                              </span>
                          </h4>
                          <div class="card-front-detail">
                              <ul>
                                  <li>3 day tours</li>
                                  <li>Up to 30 people</li>
                                  <li>2 tour guides</li>
                                  <li>Sleep in cozy hotels</li>
                                  <li>Difficulty:easy</li>
                              </ul>
                          </div>
                      </div>
                      <div class="card_side back">
                          <div class="cta">
                              <div class="price">
                                  <p class="only">Only</p>
                                  <p class="value">$297</p>
                              </div>
                              <a href="#popup" class="btn btn-white">Book now!</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-1-of-3">
                  <div class="card">
                      <div class="card_side front">
                          <div class="card-front-pic">
                              &nbsp;
                          </div>
                          <h4 class="card-front-heading">
                              <span class="card_heading_span">
                                  The sea explorer
                              </span>
                          </h4>
                          <div class="card-front-detail">
                              <ul>
                                  <li>3 day tours</li>
                                  <li>Up to 30 people</li>
                                  <li>2 tour guides</li>
                                  <li>Sleep in cozy hotels</li>
                                  <li>Difficulty:easy</li>
                              </ul>
                          </div>
                      </div>
                      <div class="card_side back">
                          <div class="cta">
                              <div class="price">
                                  <p class="only">Only</p>
                                  <p class="value">$297</p>
                              </div>
                              <a href="#popup" class="btn btn-white">Book now!</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="discover_btn">
              <a href="#" class="btn btn-green">Discover all tours</a>
          </div>

      </section>

      <section class="section-stories">
          <div class="bg-video">
              <video class="bg-video_content" autoplay muted loop>
                  <source src="img/video.mp4" type="video/mp4">
                  <source src="img/video.webm" type="video/webm">
                  Your browser is not supported!
              </video>
          </div>

          <div class="u-center-text u-margin-bottom-8">
              <h2 class="heading-secondary">
                  We make people genuinely happy
              </h2>
          </div>

          <div class="row">
              <div class="story">
                  <figure class="story_shape">
                      <img src="img/nat-8.jpg" class="story_image">
                      <figcaption class="story_caption">
                          Mary Smith
                      </figcaption>
                  </figure>
                  <div class="story_text">
                      <h3 class="heading-tertiary u-margin-bottom-small">
                          I had the best week ever with my family
                      </h3>
                      <p>
                          Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 historiit is a well-known city with 2200 histoit is a well-known city with 2200 histokkkk
                      </p>
                  </div>
              </div>
              <div class="story">
              <figure class="story_shape">
                  <img src="img/nat-8.jpg" class="story_image">
                  <figcaption class="story_caption">
                      Mary Smith
                  </figcaption>
              </figure>
              <div class="story_text">
                  <h3 class="heading-tertiary u-margin-bottom-small">
                      I had the best week ever with my family
                  </h3>
                  <p>
                      Fuzhou is the provincial capital of Fujian Province, it is a well-known city with 2200 historiit is a well-known city with 2200 histoit is a well-known city with 2200 histokkkk
                  </p>
              </div>
          </div>
          </div>

          <div class="discover_btn">
              <a href="#" class="btn-text">Discover all stories&rarr;</a>
          </div>

      </section>

      <section class="section-book">
          <div class="row">
              <div class="book">
                  <div class="book-form">
                      <form action="#" class="form">
                          <div class="u-center-text u-margin-bottom-medium">
                              <h2 class="heading-secondary">
                                  Booking Now!
                              </h2>
                          </div>
                          <div class="form_group">
                              <input type="text" class="form_input" placeholder="Full Name" id="name" required>
                              <label for="name" class="form_label">Full Name</label>
                          </div>
                          <div class="form_group">
                              <input type="email" class="form_input" placeholder="Email" id="email" required>
                              <label for="email" class="form_label">Email Address</label>
                          </div>

                          <div class="radio_group">
                              <input type="radio" class="radio_input" id="small" name="size">
                              <label for="small" class="radio_label">
                                  <span class="radio_button"></span>
                                  Small tour group
                              </label>
                          </div>
                          <div class="radio_group">
                              <input type="radio" class="radio_input" id="large" name="size">
                              <label for="large" class="radio_label">
                                  <span class="radio_button"></span>
                                  Large tour group
                              </label>
                          </div>

                          <div class="discover_btn">
                              <button class="btn btn-green-2">Next Step &rarr;</button>
                          </div>


                      </form>
                  </div>
              </div>
          </div>
      </section>

      <footer class="footer">
          <div class="footer_logo_box">
            <img src="img/logo-green-2x.png" class="footer_logo"/>
            <div class="row">
                <div class="col-1-of-2">
                    <div class="footer_nav">
                        <ul class="footer_list">
                            <li class="footer_item"><a href="" class="footer_link">Company</a></li>
                            <li class="footer_item"><a href="" class="footer_link">Contact us</a></li>
                            <li class="footer_item"><a href="" class="footer_link">Career</a></li>
                            <li class="footer_item"><a href="" class="footer_link">Privacy policy</a></li>
                            <li class="footer_item"><a href="" class="footer_link">Terms</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-1-of-2">
                    <p class="footer_copyright">
                      Built my afsk flaksl fjs adkfjads jfsa faala jfasj for his online course,Built my afsk fla kslf jsad kfja dsjfs afaal ajfasj for his online course,Built my afskf lakslf jsadk fjadsjfsa faalaj fasj for his online course
                    </p>
                </div>
            </div>
          </div>

      </footer>
  </main>

  <div class="popup" id="popup">
      <div class="popup_content">
          <div class="popup_left">
              <img src="img/nat-8.jpg" class="popup_img">
              <img src="img/nat-9.jpg" class="popup_img">
          </div>
          <div class="popup_right">
              <a href="#" class="popup_close">
                &times;
              </a>
              <h2 class="heading-secondary">Start Booking Now!</h2>
              <h3 class="heading-tertiary">Important &ndash; Please read these terms before booking</h3>
              <p class="popup_text">
                  Lorem ipsum dolor sit amet, ne his quaeque percipitur. Prodesset adolescens efficiendi eu vim, no everti omnesque vim. Ei labitur insolens intellegam vel. Vis ne habeo atomorum iracundia, per sonet labitur te. Sea ut esse admodum urbanitas. Has ut suas labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas. Has ut suas labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas.labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas.labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas.labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas.labore oportere.acundia, per sonet labitur te. Sea ut esse admodum urbanitas.l
              <div>
                <a href="#" class="btn btn-green">Book Now</a>
              </div>
          </div>
      </div>
  </div>

</body>

</html>
